/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/04/03
 *@description   radio-group  component，单选框组。
 */

/**
 * #item
 *
 * @type         aty-radio-group
 * @cn          单选框组
 * @nameprop    label
 * @menu        表单
 * @stPlugin    true
 * @stContainer false
 * @children    [aty-radio ]
 * @mixins      [./components/components/form/form-item/form-item.js]
 */
import config from '../../../config/config.js'
import formItem from '../form-item/form-item.js'

// components
import Radio from '../radio/index.vue'

// prefix
const componentName = config.prefix + '-radio-group'
// module
const module = {
  name: componentName,
  mixins: [formItem],
  components: { Radio },
  model: {
    prop: 'value', // 属性名
    event: 'change' //  事件名
  },
  props: {
    /**
     * #property
     *
     * @name    name
     * @cn      属性名称
     * @group   基本属性
     * @type    string
     * @description HTML radio 对象 的原生name属性
     */
    name: {
      type: String
    },
    /**
     * #property
     *
     * @name    value
     * @cn      值
     * @group   基本属性
     * @type    string,number,boolean
     * @description 组件的值
     */
    value: {
      type: [String, Number, Boolean]
    },
    /**
     * #property
     *
     * @name    dataList
     * @cn      数据列表
     * @group   数据
     * @type    array
     * @bind    must
     * @description 值为一个数组对象，对象包含如下格式的值：[ ...{code:'',  codeType:'', name:''  }]
     *
     */
    dataList: {
      type: Array,
      default () {
        return []
      }
    },
    /**
     * #property
     *
     * @name    type
     * @cn      单选框样式类型
     * @group   基本属性
     * @type    list
     * @value  radio
     * @options [button, radio]
     * @description 单选框样式类型，取值为 ['button', 'radio']中的其中一个
     */
    type: {
      validator (value) {
        return Artery.isOneOf(value, ['button', 'radio'])
      },
      default: 'radio'
    },
    /**
     * #property
     *
     * @name    disabled
     * @cn      是否禁用
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 该选项下的所有radio是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    vertical
     * @cn      是否是垂直摆放
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 该组raido是否是垂直摆放
     */
    vertical: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    codeType
     * @cn      代码类型
     * @group   基本属性
     * @type    codetype
     * @bind    mustnot
     * @description 代码类型
     */
    codeType: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      // 当前数据列表
      currentDataList: []
    }
  },
  watch: {
    // 监听数据变化
    dataList: {
      deep: true,
      immediate: true,
      handler (newValue, oldValue) {
        this.currentDataList = JSON.parse(JSON.stringify(newValue))
      }
    }
  },
  computed: {
    wrapClasses () {
      return [
        `${componentName}-wrapper`,
        {
          [`${componentName}-${this.type}`]: !!this.type,
          [`${componentName}-vertical`]: this.vertical
        }
      ].concat(this.formItemClasses)
    },
    wrapStyles () {
      return this.formItemStyles
    }
  },
  methods: {
    checkedChange (value, event) {
      let dataItem = []
      if (this.currentDataList.length > 0) {
        dataItem = this.currentDataList.filter(item => value === item.code || value + '' === item.code + '')
      }
      /**
       * #event
       *
       * @name    change
       * @param   value   当前选中的所有值
       * @param   dataItem   当前选中的所有值所对应的所有对象
       * @param   event   当前事件的event对象
       * @body
       * @description 数据改变时触发
       */
      this.$emit('change', value, dataItem, event)
    },
    loadCodeData () { // 加载代码值数据
      if (!this.codeType || this.codeType === '') {
        return
      }
      Artery.loadCode(this.codeType).then(codeList => {this.currentDataList = codeList})
    }
  },
  beforeMount () {
    this.loadCodeData()
  }
}
export default module
